<#escape x as x?html>
<form class="form-horizontal form-fusion" name="recordForm" id="recordForm" method="post" action="${actionType!}">
    <input type="text" class="hide"
           name="id" value="${(record.id)!}">
    <div class="form-group">
        <label class="col-sm-3 control-label" for="desc">名称</label>
        <div class="col-sm-8">
            <input type="text" class="form-control"
                   name="name" placeholder="请填写应用名称，例如：天气预报"
                   data-error="<@s.message "validator.error.require"/>" required
                   value="${(record.name)!}"></input>
            <div class="help-block with-errors"></div>
        </div>
    </div>
    <div class="form-group">
        <label class="col-sm-3 control-label" for="desc">显示名称</label>
        <div class="col-sm-8">
            <input type="text" class="form-control"
                   name="displayName" placeholder="请填写应用显示名称，例如: 天气预报应用"
                   data-error="<@s.message "validator.error.require"/>" required
                   value="${(record.displayName)!}"></input>
            <div class="help-block with-errors"></div>
        </div>
    </div>

    <div class="form-group">
        <label class="col-sm-3 control-label" for="desc">Context</label>
        <div class="col-sm-8">
            <input type="text" class="form-control"
                   name="context" placeholder="请填写应用Context，例如:weather"
                   data-error="<@s.message "validator.error.require"/>" required
                   value="${(record.context)!}"></input>
            <div class="help-block with-errors"></div>
        </div>
    </div>

    <div class="form-group">
        <label class="col-sm-3 control-label" for="desc">版本</label>
        <div class="col-sm-8">
            <input type="text" class="form-control"
                   name="version" placeholder="请填写应用版本，例如:1.0 或 1.0.0"
                   data-error="<@s.message "validator.error.require"/>" required
                   value="${(record.version)!}"></input>
            <div class="help-block with-errors"></div>
        </div>
    </div>

    <div class="form-group">
        <label class="col-sm-3 control-label" for="category">分类</label>
        <div class="col-sm-8">
            <select id="roleSelect" class="form-control select2"
                    data-url="${contextPath}/sys/applicationCategory/rest/findAll" data-value="${(record.categoryId)!}"
                    data-key="id"
                    name="categoryId" data-placeholder="请选择分类">
            </select>
        </div>
    </div>

    <div class="form-group">
        <label class="col-sm-3 control-label" for="logoFile"><span class="red-star"
                                                                   style="color:red;">*  </span>LOGO(72px*72px)</label>
        <div class="col-sm-8">
            <input type="file" name="tLogoFile">
        </div>
    </div>
    <div class="form-group">
        <label class="col-sm-3 control-label" for="bannerFile"><span class="red-star"
                                                                     style="color:red;">*  </span>应用截图(330px*450px)</label>
        <div class="col-sm-8">
            <div class="clearfix">
                <input type="file" name="tScreenshotFile" onchange="selectFile(this)" class="pull-left">
                <button class="btn fa fa-remove pull-left" onclick="delFile(this); return false;"></button>
            </div>
        </div>
    </div>

    <div class="form-group">
        <label class="col-sm-3 control-label" for="proxyMetaSelect">通信协议</label>
        <div class="col-sm-8">
            <select id="proxyMetaSelect" class="form-control select2"
                    data-url="${contextPath}/sys/applicationCategory/rest/findAllProxyMeta"
                    data-value="${(record.proxyMetaId)!}"
                    data-key="id"
                    name="proxyMetaId" data-placeholder="请选择通信协议"
                    data-error="<@s.message "validator.error.require"/>" required>
            </select>
            <div class="help-block with-errors"></div>
        </div>
    </div>

    <div class="form-group">
        <label class="col-sm-3 control-label" style="padding-top:0" for="useReponseDispatcher">response内容替换</label>
        <div class="col-sm-8" style="margin-top: -4px">
            <input id="useReponseDispatcher" name="useReponseDispatcher" type="checkbox"
                   title="注意部分网站有网络防爬虫功能，开启此功能会无法显示页面"
                   <#if record??&&record.useReponseDispatcher?string('true','false')  == "true">checked</#if>>
        </div>
    </div>
    <div class="form-group defaultEncoding">
        <label class="col-sm-3 control-label" for="defaultEncoding">默认编码</label>
        <div class="col-sm-8">
            <input id="defaultEncoding" type="text" class="form-control"
                   name="defaultEncoding" placeholder="请填写response内容的默认编码，如果不填写默认为utf-8"
                   value="${(record.defaultEncoding)!}"></input></div>
    </div>

    <div class="form-group">
        <label class="col-sm-3 control-label" for="desc">应用地址</label>
        <div class="col-sm-8">
            <input type="text" class="form-control"
                   name="indexUrl" placeholder="请填写应用地址，例如:http://127.0.0.1:8080/appstore"
                   data-error="<@s.message "validator.error.require"/>" required
                   value="${(record.indexUrl)!}"></input>
            <div class="help-block with-errors"></div>
        </div>
    </div>

    <div class="form-group">
        <label class="col-sm-3 control-label" for="applications">数据服务</label>
        <div class="col-sm-8">
            <input type="text" class="hide"
                   name="serviceIds"
                   value="<#if record??><#list record.serviceIds as service>${service},</#list></#if>">
            <div class="service-tree fancytree-form"></div>
        </div>
    </div>

    <div>
        <hr style="margin: 20px 0;border: 0;
            border-top: 1px solid #343434;
            border-bottom: 1px solid #ffffff;">
    </div>

    <div class="form-group">
        <label class="col-sm-3 control-label" style="padding-top:0" for="useCall">流量控制</label>
        <div class="col-sm-8">
            <label class="" for="useCallTimesSec">调用次数控制</label>
            <input id="useCallTimesSec" name="useCallTimesSec" type="checkbox"
                   title="注意部分网站有网络防爬虫功能，开启此功能会无法显示页面"
                   <#if record??&&record.useCallTimesSec?string('true','false')  == "true">checked</#if>>

            <label class="" style="margin-left: 20px;" for="useCallDatasSec">调用量控制</label>
            <input id="useCallDatasSec" name="useCallDatasSec" type="checkbox"
                   title="注意部分网站有网络防爬虫功能，开启此功能会无法显示页面"
                   <#if record??&&record.useCallDatasSec?string('true','false')  == "true">checked</#if>>
        </div>
    </div>

    <div class="useCallTimesSec">
        <div class="form-group">
            <label class="col-sm-3 control-label" for="oneDayTimes">每天调用次数阀值</label>
            <div class="col-sm-8">
                <input id="oneDayTimes" type="text" class="form-control"
                       name="oneDayTimes" placeholder=""
                       value="${(record.oneDayTimes)!}"></input></div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label" for="oneMothTimes">每月调用次数阀值</label>
            <div class="col-sm-8">
                <input id="oneMothTimes" type="text" class="form-control"
                       name="oneMothTimes" placeholder=""
                       value="${(record.oneMothTimes)!}"></input></div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label" for="oneYearTimes">每年调用次数阀值</label>
            <div class="col-sm-8">
                <input id="oneYearTimes" type="text" class="form-control"
                       name="oneYearTimes" placeholder=""
                       value="${(record.oneYearTimes)!}"></input></div>
        </div>
    </div>

    <div class="useCallDatasSec">
        <div class="form-group">
            <label class="col-sm-3 control-label" for="oneDayVisits">每天调用量阀值(byte)</label>
            <div class="col-sm-8">
                <input id="oneDayVisits" type="text" class="form-control"
                       name="oneDayVisits" placeholder=""
                       value="${(record.oneDayVisits)!}"></input></div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label" for="oneMothVisits">每月调用量阀值(byte)</label>
            <div class="col-sm-8">
                <input id="oneMothVisits" type="text" class="form-control"
                       name="oneMothVisits" placeholder=""
                       value="${(record.oneMothVisits)!}"></input></div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label" for="oneYearVisits">每年调用量阀值(byte)</label>
            <div class="col-sm-8">
                <input id="oneYearVisits" type="text" class="form-control"
                       name="oneYearVisits" placeholder=""
                       value="${(record.oneYearVisits)!}"></input></div>
        </div>
    </div>

    <div>
        <hr style="margin: 20px 0;border: 0;
            border-top: 1px solid #343434;
            border-bottom: 1px solid #ffffff;">
    </div>

    <div class="form-group">
        <label class="col-sm-3 control-label" for="desc">标签</label>
        <div class="col-sm-8">
            <input id="tags" type="text" class="form-control"
                   name="tags" placeholder="请填写应用标签,最多五个，例如:"
                   data-error="<@s.message "validator.error.require"/>" required></input>
            <div class="help-block with-errors"></div>
        </div>
    </div>

    <div class="form-group">
        <label class="col-sm-3 control-label" for="desc">描述</label>
        <div class="col-sm-8">
            <textarea type="text" class="form-control" name="description" placeholder="请填写应用描述"
                      data-error="<@s.message "validator.error.require"/>" required
                      value="${(record.description)!}">${(record.description)!}</textarea>
            <div class="help-block with-errors"></div>
        </div>
    </div>
    <div class="form-group">
        <label class="col-sm-3 control-label" for="desc">版本特性</label>
        <div class="col-sm-8">
            <textarea type="text" class="form-control"
                      name="versionFeature" placeholder="请填写应用版本特性"
                      data-error="<@s.message "validator.error.require"/>" required
                      value="${(record.versionFeature)!}">${(record.versionFeature)!}</textarea>
            <div class="help-block with-errors"></div>
        </div>
    </div>
</form>
<script>
    context.call([
        "core",
        "scanSelect",
        "jQuery",
        "tokeninput",
        "jQueryFancyTree"
    ], function (core, scanSelect, jQuery, tokeninput) {
        var jsonStr = "";
        <#if record ??>
            var tagSize = '${record.tags?size}';
            if (tagSize != 0) {
                var _tags = new Array();
                <#list record.tags as tag >
                    var _tag = new Object();
                    _tag.id = '${tag}';
                    _tag.name = '${tag}';
                    _tags.push(_tag);
                </#list>
                jsonStr = JSON.stringify(_tags);
            }
        </#if>
        scanSelect.initSelect();
        $("#tags").tokenInput("/app/getTags", {
            theme: "facebook",
            tokenLimit: 5,
            prePopulate: eval(jsonStr),
            allowFreeTagging: true
        });

        if ($("#recordForm").attr("action") == "view") {
            $(".token-input-delete-token-facebook").unbind();
        }
        useReponseDispatcher();
        callTimes();
        callsDatas();
        $("#useReponseDispatcher").on("click", function () {
            useReponseDispatcher();
        });

        $("#useCallTimesSec").on("click", function () {
            callTimes();
        });

        $("#useCallDatasSec").on("click", function () {
            callsDatas();
        })

        var id = $("input[name='id']").val();
        if (id == "") id = 0;
        $(".service-tree").fancytree({
            checkbox: true,
            selectMode: 3,
            minExpandLevel: 3,
            source: {
                url: "/console/app/getServiceTree?id=" + id,
                debugDelay: 100
            },
            icon: function (event, data) {
                if (core.isEmpty(data.node.children)) {
                    return "fa fa-cog";
                } else {
                    return "fa fa-cogs";
                }
            },
            select: function (event, data) {
                var selKeys = $.map(data.tree.getSelectedNodes(), function (node) {
                    if (node.children) {
                        return null;
                    } else {
                        return node.key;
                    }
                });

                $("input[name='serviceIds']").val(selKeys);
            }
        });

        if ($("#recordForm").attr("action") == "view")  $(".service-tree").fancytree("disable");
    });

    function useReponseDispatcher() {
        if ($("#useReponseDispatcher").is(":checked")) {
            $(".defaultEncoding").removeClass("hide");
        } else {
            $(".defaultEncoding").addClass("hide");
        }
    }

    function callTimes() {
        if ($("#useCallTimesSec").is(":checked")) {
            $(".useCallTimesSec").removeClass("hide");
        } else {
            $(".useCallTimesSec").addClass("hide");
        }
    }

    function callsDatas() {
        if ($("#useCallDatasSec").is(":checked")) {
            $(".useCallDatasSec").removeClass("hide");
        } else {
            $(".useCallDatasSec").addClass("hide");
        }
    }

    function delFile(e) {
        var an = $(e).parent().parent();
        if (an.children().length == 1) {
            var obj = $(e).prev();
            obj.after(obj.clone().val(""));
            obj.remove();
            return;
        }
        $(e).parent().remove();
    }

    function selectFile(e) {
        var an = $(e).parent().parent();
        var addNew = true;
        $.each(an.find("input"), function () {
            if (!$(this).val()) {
                addNew = false;
            }
        });
        if (addNew) {
            var last = an.children().last();
            var clone = last.clone();
            clone.children().first().val("");
            last.after(clone);
        }
    }
</script>
<style>
    .service-tree .ui-fancytree {
        height: 100px;
        overflow: auto;
    }
</style>
</#escape>